<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<!--表格-基础-->
<!-- Section - Bootstrap Brain Component -->
<div th:fragment="Tables">
    <!--突出表格-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Protrude">
        <div class="container">
            <div class="row gy-3 gy-md-4">
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Striped Rows</h5>
                                </div>
                                <div class="card-body p-4">
                                    <table class="table table-striped">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">First</th>
                                            <th scope="col">Last</th>
                                            <th scope="col">Handle</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>Thornton</td>
                                            <td>@fat</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td colspan="2">Larry the Bird</td>
                                            <td>@twitter</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Striped columns</h5>
                                </div>
                                <div class="card-body p-4">
                                    <table class="table table-striped-columns">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">First</th>
                                            <th scope="col">Last</th>
                                            <th scope="col">Handle</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>Thornton</td>
                                            <td>@fat</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td colspan="2">Larry the Bird</td>
                                            <td>@twitter</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--卡片表格-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="CardsTables">
        <div class="container">
            <div class="row gy-3 gy-md-4">
                <div class="col-12">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm bg-transparent">
                                <div class="card-header bg-white p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Transactions Table</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card widget-card border-light shadow-sm">
                                        <div class="card-body p-4">
                                            <h5 class="card-title widget-card-title mb-4">Monthly Transactions</h5>
                                            <div class="table-responsive">
                                                <table class="table table-borderless bsb-table-xl text-nowrap align-middle m-0">
                                                    <thead>
                                                    <tr>
                                                        <th>Invoice</th>
                                                        <th>Customer</th>
                                                        <th>Product</th>
                                                        <th>Price</th>
                                                        <th>Status</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-1">#HO3210</h6>
                                                            <span class="text-secondary fs-7">Web, UI Design</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Oliver</h6>
                                                            <span class="text-secondary fs-7">United States</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Bootstrap</h6>
                                                            <span class="text-secondary fs-7">v5.3+</span>
                                                        </td>
                                                        <td>$495</td>
                                                        <td>
                                                            <span class="badge rounded-pill bg-danger">Pending</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-1">#DR8672</h6>
                                                            <span class="text-secondary fs-7">Web, UX Design</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Emma</h6>
                                                            <span class="text-secondary fs-7">United Kingdom</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">WordPress</h6>
                                                            <span class="text-secondary fs-7">v6.3+</span>
                                                        </td>
                                                        <td>$950</td>
                                                        <td>
                                                            <span class="badge rounded-pill bg-success">Paid</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-1">#SA2910</h6>
                                                            <span class="text-secondary fs-7">Web, SEO</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Isabella</h6>
                                                            <span class="text-secondary fs-7">Canada</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">React</h6>
                                                            <span class="text-secondary fs-7">v18+</span>
                                                        </td>
                                                        <td>$700</td>
                                                        <td>
                                                            <span class="badge rounded-pill bg-info">On Hold</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h6 class="mb-1">#BD1019</h6>
                                                            <span class="text-secondary fs-7">SEM, SEO</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">William</h6>
                                                            <span class="text-secondary fs-7">UAE</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Vue</h6>
                                                            <span class="text-secondary fs-7">v3+</span>
                                                        </td>
                                                        <td>$875</td>
                                                        <td>
                                                            <span class="badge rounded-pill bg-warning">Negotiating</span>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm bg-transparent">
                                <div class="card-header bg-white p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Marketing Table</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="card widget-card border-light shadow-sm">
                                        <div class="card-body p-4">
                                            <h5 class="card-title widget-card-title mb-4">Marketing Campaigns</h5>
                                            <div class="table-responsive">
                                                <table class="table table-borderless bsb-table-xl text-nowrap align-middle m-0">
                                                    <thead>
                                                    <tr>
                                                        <th>Campaign</th>
                                                        <th>Client</th>
                                                        <th>Project</th>
                                                        <th>Status</th>
                                                        <th>Budget</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                    <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-primary rounded-circle d-flex align-items-center justify-content-center me-2">
                                      <i class="bi bi-twitter-x"></i>
                                    </span>
                                                                <div>
                                                                    <h6 class="m-0">Twitter</h6>
                                                                    <span class="text-secondary fs-7">SMM</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Oliver</h6>
                                                            <span class="text-secondary fs-7">United States</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Bootstrap</h6>
                                                            <span class="text-secondary fs-7">v5.3+</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-danger bsb-w-85">Pending</span>
                                                        </td>
                                                        <td>$495</td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                    <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-success rounded-circle d-flex align-items-center justify-content-center me-2">
                                      <i class="bi bi-facebook"></i>
                                    </span>
                                                                <div>
                                                                    <h6 class="m-0">Facebook</h6>
                                                                    <span class="text-secondary fs-7">PPC</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Emma</h6>
                                                            <span class="text-secondary fs-7">United Kingdom</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">WordPress</h6>
                                                            <span class="text-secondary fs-7">v6.3+</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-success bsb-w-85">Paid</span>
                                                        </td>
                                                        <td>$950</td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                    <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-danger rounded-circle d-flex align-items-center justify-content-center me-2">
                                      <i class="bi bi-github"></i>
                                    </span>
                                                                <div>
                                                                    <h6 class="m-0">Github</h6>
                                                                    <span class="text-secondary fs-7">PPC</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Isabella</h6>
                                                            <span class="text-secondary fs-7">Canada</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">React</h6>
                                                            <span class="text-secondary fs-7">v18+</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-info bsb-w-85">Paused</span>
                                                        </td>
                                                        <td>$700</td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                    <span class="fs-6 bsb-w-35 bsb-h-35 bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                                      <i class="bi bi-youtube"></i>
                                    </span>
                                                                <div>
                                                                    <h6 class="m-0">YouTube</h6>
                                                                    <span class="text-secondary fs-7">SMM</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">William</h6>
                                                            <span class="text-secondary fs-7">UAE</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Vue</h6>
                                                            <span class="text-secondary fs-7">v3+</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-warning bsb-w-85">Active</span>
                                                        </td>
                                                        <td>$875</td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                    <span class="fs-6 bsb-w-35 bsb-h-35 bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                                      <i class="bi bi-google"></i>
                                    </span>
                                                                <div>
                                                                    <h6 class="m-0">Google</h6>
                                                                    <span class="text-secondary fs-7">SEM</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Preston</h6>
                                                            <span class="text-secondary fs-7">Australia</span>
                                                        </td>
                                                        <td>
                                                            <h6 class="mb-1">Svelte</h6>
                                                            <span class="text-secondary fs-7">v4+</span>
                                                        </td>
                                                        <td>
                                                            <span class="badge bg-primary bsb-w-85">Closed</span>
                                                        </td>
                                                        <td>$1230</td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--基础表格-->
    <section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="Basic">
        <div class="container">
            <div class="row gy-3 gy-md-4">
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Overview</h5>
                                </div>
                                <div class="card-body p-4">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">First</th>
                                            <th scope="col">Last</th>
                                            <th scope="col">Handle</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>Mark</td>
                                            <td>Otto</td>
                                            <td>@mdo</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>Jacob</td>
                                            <td>Thornton</td>
                                            <td>@fat</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td colspan="2">Larry the Bird</td>
                                            <td>@twitter</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="row gy-3 gy-md-4">
                        <div class="col-12">
                            <div class="card widget-card border-light shadow-sm">
                                <div class="card-header bg-transparent p-4 border-light-subtle">
                                    <h5 class="card-title widget-card-title m-0">Variants</h5>
                                </div>
                                <div class="card-body p-4">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th scope="col">Class</th>
                                            <th scope="col">Heading</th>
                                            <th scope="col">Heading</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row">Default</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>

                                        <tr class="table-primary">
                                            <th scope="row">Primary</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr class="table-secondary">
                                            <th scope="row">Secondary</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr class="table-success">
                                            <th scope="row">Success</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr class="table-danger">
                                            <th scope="row">Danger</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr class="table-warning">
                                            <th scope="row">Warning</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr class="table-info">
                                            <th scope="row">Info</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr class="table-light">
                                            <th scope="row">Light</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        <tr class="table-dark">
                                            <th scope="row">Dark</th>
                                            <td>Cell</td>
                                            <td>Cell</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</html>